<!--
 * @Author: your name
 * @Date: 2021-08-18 09:34:03
 * @LastEditTime: 2021-08-18 10:46:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /undefined/Users/chenjingyu/Desktop/<Starbuck>.html
-->
<!--
 * @Author: your name
 * @Date: 2021-08-18 09:34:03
 * @LastEditTime: 2021-08-18 09:34:03
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: /undefined/Users/chenjingyu/Desktop/<Starbuck>.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-Edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>星巴克｜用每一杯咖啡传递星巴克独特的咖啡体验</title>
    <link rel="icon" type="image/png" href="https://www-static.chinacdn.starbucks.com.cn/prod/assets/favicons/favicon-32x32.png">
    <style>
        #{margin: 0;
          padding: 0;}
        .body>.left{
            border: 1px solid tomato;
            position: fixed;
            width: 30%;
            height:100%;
        }
        .body.right{
            float: left;
            border: 1px solid yellowgreen;
            width: 68%;
            margin-left: 30%;
            
        }
        .left>.header{
            border: 1px solid goldenrod;
            height: 48px;
            padding: 24px;
        }
        .header>div{
            float: left;
        }
        /* 头部logo  */
        .left>.header>.logo{}
        .left>.header>.logo>a>img{
            width: 36px;
            margin-left: 12px;
        }
        /* 头部导航栏 */
        .header>div>li{
            float: left;
            list-style-type: none;
            padding: 5px;
            font: 16px;
            font-weight: bold;
            color:rgba(0, 0, 0, 87)
        }
        /*头部右侧的图标*/
        .left>.header>.icon{
            float: right;
            padding-top: 6px;
        }
        .left>.left_body{
            border:  1px solid cornflowerblue;
            height: calc(100% - 100px);
            /* 100vh是当前窗口的高度 */
            padding-top: cal(100vh - 100px)/2;
            text-align: center;
        }
        .left>.left_body>.text{
            font-size: 26px;
            font-weight: bold;
            color: rgba(0, 0, 0, 87);
        }
        .left>.left_body>.login{
            margin-right:24px ;
            float: left;
            padding: 3px 0;
        }
        .left>.left_body>.button{
            color: darkgreen;
            font-size: 1.6rem;
            position: relative;
        }
        .left>.left_body>.button>.register{
            border: 1px solid darkgreen;
            border-radius: 48px;
        }
        .body>.right{
            float: left;
            border: 1px solid yellowgreen;
            width: 70%;
            margin-left: 30%;  
        }
        .body>.right>.lunbo>img{
            width: 100%;
        }
        .body>.right>.div1{
            padding: 0 24px;
        }
        .body>.right>.div1>.dib1_1{
            width: cal((100%-72px)/3);
            padding: 12px;
            float: left;
        }
        .body>.right>.div1>.dib1_1>img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="body"></div>
        <div class="left">
            <header class="header">
                <!--头部菜单logo-->
                <div class="logo">
                    <a href="">
                        <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg" alt="logo">
                    </a>
                </div>
                <!--头部菜单导航-->>
                <div class="primary">
                    <li>门店</li>
                    <li>我的账户</li>
                    <li>菜单</li>
                </div>
                <!--头部右侧的图标-->
                <div class="icon">
                    <a href="">
                        <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-hamburger.svg" alt="">
                    </a>
                </div>
            </header>
            <div class="left_body">
                心情惬意，来杯咖啡吧☕
                <div class="button">
                    <div class="login">
                        <img src="https://www.starbucks.com.cn/assets/icons/icon-account.svg" alt="">
                        <span>登陆</span>
                    </div>
                    <div class="register">
                        注册
                    </div>
                    
                </div>
            </div>
            
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
        <div class="right">
            <div class="lunbo">
                <img src="https://www.starbucks.com.cn/account/starbucks-rewards" alt="">
            </div>
            <div class="div1">
                <div class="div1_1">
                    <img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/tmall-2020-06-29-zh.jpg" alt="">
                </div>
                <div class="div1_2">
                    <img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/starbucks-design-studio-web-china.jpg" alt="">
                </div>
                <div class="div1_3">
                    <img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/homepage-career-cn.jpg" alt="">
                </div>
            </div>
            <br><br><br><br><br><br><br><br><br><br>
        </div>
    </div>
</body>
</html>